/**
 *  webpack 配置文件   默认支持 js和json文件    别的资源需要进行配置
 */


const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入html的插件
module.exports = {

    //webpack的入口文件
    entry: './src/main.js',
    // webpack输出文件
    output: {
        //输出的文件名
        filename: 'dev.js',
        //输出的路径
        path: path.resolve(__dirname, 'dist')
    },
    //  相当于翻译官  加载不同的资源   loader
    module: {
        rules:[
        {
            test:/\.css$/,  //匹配以css结尾的文件
             //需要使用的loader 里面的加载顺序是从右向左 ，从下往上
            use:[
                // 将css放到页面的style标签中
                'style-loader',
                 // 将css文件转成commonjs规范
                'css-loader'
            ] 
        },
        {
            test:/\.scss$/,
            use:[
                 // 将css放到页面的style标签中
                'style-loader',
                // 将css文件转成commonjs规范
                'css-loader',
                // 将sass文件转换为css文件 需要下载node-sass 使支持sass语法
                'sass-loader'
            ]
        },
        {
            test:/\.less$/,
            use:[
                 // 将css放到页面的style标签中
                'style-loader',
                // 将css文件转成commonjs规范
                'css-loader',
                // 将less文件转换为css文件  还要下载less作用是编辑器支持less语法
                'less-loader'
            ]
        },
        {
            test:/\.(png|jpg|gif)$/,
            // 用它需要下载两个loader  url-loader file-loader  url-loader 依赖于 file-loader
            // url-loader 是采用的es6module 
            loader:'url-loader',  //只用到一个loader时可以使用loader这个属性  多个loader使用use
            //loader的配置项
            options:{
                //图片在8kb以内的会做base64处理
                //base64优点  减少服务器请求数量  缺点：图片体积变大
                limit : 8 * 1024,
                esModule:false, // 关闭url-loader的es6module 

                // 给图片进行重命名  [hash:10] 代表取hash值的前10位 [ext] 代表文件的原后缀名
                name:"[hash:10].[ext]"
            }
        },
        {
            test : /\.html$/,
            loader:'html-loader', // 解析html里面的img标签
        }
    ]
    },
    //用到的插件
    plugins: [
        //默认生成一个html文件 并引入对应的资源
        new HtmlWebpackPlugin({
            template : './public/index.html' // 将这个html作为模板并引入打包后的资源
        })
    ],
    //打包模式   
     mode:'development', //开发模式
    // mode: 'production', //生产模式
    // 启动一个服务器  并且实现热更新  需要安装 webpack-dev-server  特点:在内存中编译打包  没有输出
    devServer:{
        // 项目构建后的路径   
        contentBase:path.resolve(__dirname,'dist'),
        // 启动gzip压缩
        compress:true,
        //启动的端口号
        port:3000,
        //自动打开默认浏览器
        open:true,
    }
}